<template>
  <div id="app">
    <div v-if="flag">
      {{msg}}
    </div>
    <div v-else>
      {{msg1}}
    </div>
<!--    {{pinJie}}-->
<!--    <HelloWorld></HelloWorld>-->
    <button @click="change">change</button>
    <button @click="toggle">toggle</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components:{
    HelloWorld
  },
  data(){
    return {
      msg:'hello',
      msg1:'mag1',
      msg4:1,
      flag:true
    }
  },
  methods:{
    change(){
      this.msg1 = Math.random()
    },
    toggle(){
      this.flag = !this.flag
    }
  },
  computed:{
    pinJie(){
      return this.msg1 + 1
    },
    pinJie4(){
      return this.msg1 + this.msg
    },
    pinJie5(){
      return this.msg1 + this.msg4
    }
  }
}
</script>

